<template>
  <div>
    <div class="qj">
      <div class="comprehensive">
        <div>
          <span style="font-size: 25px; color: #ff6600">5</span>
          <p>综合评价</p>
          <p style="font-size: 5px; color: #999999">高于周边商家76.9%</p>
        </div>
        <div>
          <p>
            服务态度
            <span
              ><van-icon name="star" /><van-icon name="star" /><van-icon
                name="star" /><van-icon name="star" /><van-icon name="star"
            /></span>
            4.7
          </p>
          <p>
            菜品评价<span
              ><van-icon name="star" /><van-icon name="star" /><van-icon
                name="star" /><van-icon name="star" /><van-icon name="star"
            /></span>
            4.8
          </p>
          <p>送达时间</p>
        </div>
      </div>
      <div class="pjfl">
        <ul>
          <li
            v-for="(item, index) in classList"
            :key="index"
            :class="{ bg: item.unsatisfied }"
            @click="bg(index)"
          >
            {{ item.name }}({{ item.count }})
          </li>
        </ul>
      </div>
      <div class="yh">
        <ul>
          <li v-for="(item, index) in yhList" :key="index" class="yhxq">
            <div class="yhtx"><img src="~@/assets/images/default.jpg" /></div>
            <div class="yhtp">
              <div>
                <div>{{ item.username }}</div>
                <div>{{ item.rated_at }}</div>
              </div>
              <ul class="ul1">
                <li
                  v-for="(itemratings, index) in item.item_ratings"
                  :key="index"
                >
                  <img src="~@/assets/images/cp.jpeg" style="width: 70px" />
                </li>
              </ul>
              <ul class="ul2">
                <li v-for="(foodname, index) in item.item_ratings" :key="index">
                  {{ foodname.food_name }}
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getClass, getMessage } from '@/api/shop'
export default {
  name: 'shopEvaluation',
  data() {
    return {
      classList: [],
      yhList: [],
    }
  },
  methods: {
    async getClass() {
      const { data } = await getClass()
      this.classList = data
      this.classList[0].unsatisfied = true
      this.classList.forEach((item) => {
        if (item.name !== '全部') {
          item.unsatisfied = false
        }
      })
    },
    async getMessage() {
      const { data } = await getMessage()
      this.yhList = data
      console.log('111', data)
    },
    bg(index) {
      this.classList.forEach((item) => {
        if (item.unsatisfied !== this.classList[index].unsatisfied) {
          item.unsatisfied = false
        }
      })
      this.classList[index].unsatisfied = !this.classList[index].unsatisfied
    },
  },
  created() {
    this.getClass()
    this.getMessage()
  },
}
</script>

<style lang='less' scoped>
.qj {
  background-color: #f5f5f5;
  .comprehensive {
    display: flex;
    background-color: #ffffff;
    width: 100%;
    margin: 10px 0px;
    div {
      p {
        margin: 5px 0;
      }
    }
    div:nth-child(1) {
      text-align: center;
      padding: 0 20px;
    }
    div:nth-child(2) {
      p {
        color: #666666;
        span {
          font-size: 10px;
          color: #ff9a0d;
        }
        span:nth-child(1) {
          margin-left: 5px;
        }
      }
    }
  }
  .pjfl {
    background-color: #fff;
    padding-bottom: 10px;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        padding: 5px;
        margin: 5px 10px;
        background-color: #ebf5ff;
      }
      .bg {
        background-color: #3190e8;
      }
    }
  }
  .yh {
    background-color: #fff;
    ul {
      .yhxq {
        display: flex;
        padding: 10px 0;
        border-top: 1px dashed #f1f1f1;
        .yhtx {
          flex: 2;
          img {
            width: 35px;
            height: 35px;
          }
        }
        .yhtp {
          flex: 11;
          div {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #a2a2a2;
          }
          .ul1 {
            display: flex;
            flex-wrap: wrap;
          }
          .ul2 {
            display: flex;
            flex-wrap: wrap;
            font-size: 15px;
            color: #999;
            li {
              border: 1px solid #ebebeb;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 50px;
              margin-right: 10px;
              padding: 5px;
            }
          }
        }
      }
    }
  }
}
</style>